<template>
    <el-form ref="form"   :model="form" label-width="80px">
        <el-form-item label="餐厅账号" >
            <el-col :span="14">
                <el-input v-model="form.no"></el-input>

            </el-col>
        </el-form-item>
        <el-form-item label="餐厅名" >
            <el-col :span="14">
                <el-input v-model="form.name"></el-input>

            </el-col>
        </el-form-item>
        <el-form-item label="电话" >
            <el-col :span="14">
                <el-input v-model="form.phone"></el-input>

            </el-col>
        </el-form-item>
        <el-form-item label="地址" >
            <el-col :span="14">
                <el-input v-model="form.address"></el-input>

            </el-col>
        </el-form-item>
        <el-form-item label="营业时间" >
            <el-col :span="14">
                <el-input  v-model="form.opentime"></el-input>

            </el-col>
        </el-form-item>
        <el-form-item label="执照日期" >
            <el-col :span="14">
                <el-input  v-model="form.createtime"></el-input>

            </el-col>
        </el-form-item>
        <el-form-item label="菜品图片">
            <el-col :span="14">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:9099/menulist/upload/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img style="width: 200px;height: 150px;" v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button @click="centerDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Detail",
        data(){
            return{
                user:{},
                form: {
                    id:'',
                    no:'',
                    name: '',
                    phone: '',
                    roleId: '',
                    address:'',
                    opentime:'',
                    createtime:'',
                    imgurl:''
                },
                imageUrl: ''
            }
        },
        methods: {
            init() {
                this.user=JSON.parse(sessionStorage.getItem('storedetail'))
                this.form=this.user[0];

            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.imgurl=res.data;
                // console.log(this.form.imgurl)
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },

            resetForm() {
                this.$refs.form.resetFields();
            },
            save(){
                this.$axios.post(this.$httpUrl + '/storedetail/update', this.form
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });

                        this.resetForm()
                        //跳转到主页
                        this.$router.replace('/SouYe');

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            }
        },
        created() {
            this.init()
        }

    }
</script>

<style scoped>

</style>